import { PureComponent } from "react";
import AppContext from '../../context';
import GrandContext from "../context/grandContext";
import Parent from './parent';

class GrandParent extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            familyName: 'ye'
        }
    }

    static contextType = AppContext;

    render() {
        const appContextValue = this.context;
        return (
            <GrandContext.Provider value={{name: 'GrandContext--value-name'}}>
                <AppContext.Consumer>
                    {(value) => {
                        return (
                            <div className="border mt10">
                                <p className="title">GrandParent</p>
                                <h1>Consumer{JSON.stringify(value)}</h1>
                                <h1>contextType{JSON.stringify(appContextValue)}</h1>
                                <p>FamilyName: {this.state.familyName}</p>
                                <Parent/>
                            </div>
                        )
                    }}
                </AppContext.Consumer>
            </GrandContext.Provider>
        )
    }
}

export default GrandParent;